<template>
  <div>
    <el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange">
      <el-table-column label="下单内容" align="center" prop="remark" />
      <el-table-column label="订单总金额" align="center" prop="totalPrice" />
      <el-table-column label="订单状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.order_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="订单日期" align="center" prop="orderDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.orderDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="我的投诉" align="center" prop="complaint" />
      <el-table-column label="回复" align="center" prop="reply" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status === '0'"
            size="mini"
            type="text"
            icon="el-icon-money"
            @click="handlePayment(scope.row)"
          >付款</el-button>
          <el-button
            v-if="scope.row.status === '1'"
            size="mini"
            type="text"
            icon="el-icon-send"
            @click="promptDelivery"
          >催发货</el-button>
          <span v-if="scope.row.status === '2'">当前订单正在由{{ scope.row.rider || '神秘人' }}派送，请稍等</span>
          <el-button
            v-if="scope.row.status === '3' && scope.row.complaint == null"
            type="danger"
            @click="handleComplaint(scope.row)"
          >投诉</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog
      title="投诉"
      :visible.sync="complaintDialogVisible"
      width="30%"
      @close="handleDialogClose"
    >
      <el-input
        type="textarea"
        v-model="complaint"
        placeholder="请输入投诉内容..."
      ></el-input>
      <span slot="footer" class="dialog-footer">
      <el-button @click="complaintDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitComplaint">确定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
import {listOrderByUser, payOrder, sendComplaint} from "@/api/system/user";

export default {
  name: "order",
  dicts: ['order_status'],
  data() {
    return {
      // 你的数据定义，例如：
      loading: false,
      orderList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 投诉
      complaintDialogVisible: false,
      complaint: '',
      currentOrder: null, // 当前被投诉的订单
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      listOrderByUser(this.queryParams).then(response => {
        this.orderList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleSelectionChange(selection) {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    handleComplaint(order) {
      this.currentOrder = order; // 保存当前订单信息
      this.complaint = ''; // 重置输入内容
      this.complaintDialogVisible = true; // 显示对话框
    },
    submitComplaint() {
      if (!this.complaint.trim()) {
        this.$message.error('投诉内容不能为空');
        return;
      }

      // 使用 sendComplaint 方法发送投诉
      sendComplaint(this.currentOrder.orderId, this.complaint)
        .then(() => {
          this.$message.success('投诉已成功提交');
          this.complaintDialogVisible = false; // 关闭对话框
          this.getList(); // 重新获取订单列表以显示最新的回复
        })
        .catch(error => {
          console.error("提交投诉失败：", error);
          this.$message.error('提交投诉失败');
        });

    },

    handleDialogClose() {
      this.complaint = ''; // 清空内容
    },

    // 显示催发货提示
    promptDelivery() {
      this.$message.success('发货提醒已发送');
    },

    // 付款
    handlePayment(order) {
      console.log("支付订单：", order.orderId);

      // 发送 GET 请求获取支付页面的 HTML
      payOrder(order.orderId)
        .then(response => {
          // 检查是否成功获取到了 HTML 内容
          if (response) {
            // 创建新窗口
            let paymentWindow = window.open('', '_blank');
            if (paymentWindow) {
              // 向新窗口写入后端返回的 HTML
              paymentWindow.document.write(response);
              paymentWindow.document.close();
            } else {
              this.$message.error('无法打开支付窗口，请检查浏览器设置');
            }
          } else {
            console.error("未获取到支付页面内容");
            this.$message.error('未获取到支付页面内容');
          }
        })
        .catch(error => {
          console.error("获取支付页面失败：", error);
          this.$message.error('获取支付页面失败');
        });
    },


    // 付款
    /*handlePayment(order) {
      window.open('/order/order/pay?orderId=' + order.orderId);
    },*/
  },

};
</script>

